<template>
    <div class="test-detail">
        <el-button type="primary" @click="goBack">返回</el-button> 
        <el-button type="success" @click="checkControl" :disabled="controlBtnStatus" v-if="userName == detailData.user_nickname && detailData.all_finish == 0">查看设备</el-button> 
        <!-- 头部 -->
        <div class="detail-header">
            <div class="header-item header-item-one">
                <div class="one-icon">
                    <img :src="detailData.app_picture.startsWith('http') ? detailData.app_picture : `data:image/png;base64,${detailData.app_picture}`" alt="icon" v-if="detailData.app_picture">
                </div>
                <div class="one-content">
                    <p>APP：{{detailData.app_name}}</p>
                    <p style="color: transparent">xxx</p>
                </div>
            </div>
            <div class="header-item header-item-content">
                <p>版本：<el-tag>{{detailData.app_version}}</el-tag></p>
                <p>包名：{{detailData.app_package_name}}</p>
            </div>
            <div class="header-item header-item-content">
                <p>类型：<el-tag>{{typeMap[detailData.type_id]}}</el-tag></p>
                <p>进度：{{detailData.process}}%</p>
            </div>
            <div class="header-item header-item-content">
                <p>创建时间：{{detailData.creation_time}}</p>
                <p>开始时间：{{detailData.begin_time}}</p>
            </div>
            <div class="header-item header-item-content">
                <p>创建人：{{detailData.user_nickname}}</p>
                <p>总耗时：{{detailData.run_time}} 分钟</p>
            </div>
        </div>
        <!-- 主体tab内容 -->
        <div class="detail-content" v-if="!showIframe"> 
            <el-tabs v-model="activeName" style="width: 100%;">
                <el-tab-pane name="first" class="detail-content-panel">
                    <span slot="label"><i class="el-icon-tickets"></i> 测试概况</span>
                    <TestOverview :sub-data="detailData"></TestOverview> 
                </el-tab-pane>
                <el-tab-pane name="second" class="detail-content-panel">
                    <span slot="label"><i class="el-icon-goods"></i> 测试详情</span>
                    <TestDetailSub :sub-data="detailData"></TestDetailSub>    
                </el-tab-pane>
                <el-tab-pane name="third" class="detail-content-panel">
                    <span slot="label"><i class="el-icon-edit-outline"></i> 日志记录</span>
                    <ErrorLog :sub-data="detailData"></ErrorLog>    
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 一机多控 内容 -->
        <div class="detail-header" v-if="showIframe">
            <el-row style="float: left;margin-left:30px;margin-top:20px;">
                <el-button class="btn-group" type="danger" @click="stopUseDevices">收起</el-button>
            </el-row>
            <iframe
            style="margin-left:30px;margin-right:60px;"
            name="myiframe"
            id="myiframe"
            :src="srcurl"
            frameborder="0"
            align="left"
            width="100%"
            :height="600"
            scrolling="no"
            >
            <p>你的浏览器不支持iframe标签</p>
            </iframe>
        </div>
    </div>
</template>
<script>
import TestOverview from './detailComp/TestOverview'
import TestDetailSub from './detailComp/TestDetailSub'
import ErrorLog from './detailComp/ErrorLog'
import tcdevicesApi from "@/api/tcdevices.js";
import monkeyApi from "@/api/monkey.js";
export default {
    data () {
        return {
            showIframe: false,
            controlBtnStatus: false,
            srcurl: '',
            activeName: 'first',
            typeMap: {
                1: 'MIX（混合模式）',
                2: 'DFS（深度遍历）',
                3: 'TROY（可配置的深度遍历）'  
            },
            timer: ""
        }
    },
    computed: {
        userName() {
        return this.$store.state.login.username;
        },
    },
    props: [ 'detailData' ],
    methods: {
        goBack () {
            this.$emit('closeDetail')
        },
        checkControl () {
            if (this.detailData.control_id && this.detailData.process < 100) {
                this.srcurl = `${process.env.STF_URL}/#!/multi/${this.detailData.control_id}`
                this.showIframe = true
            } else {
                this.controlBtnStatus = true
                alert('无法查看设备')
            }
        },
        stopUseDevices: function() {
            // var serials = this.detailData.mobile_ids.split(',')
            
            // serials.forEach(function(serial) {
            //     const data = { userid: 1, serial: serial }
            //     tcdevicesApi.disconnectDevices(data).then(
            //         res => {
            //         console.info("断开设备" + serial);
            //         console.info(res.data.data);
            //         },
            //         error => {
            //         this.$message.error(`断开设备失败: ${error.message}`);
            //         }
            //     )
            // })

            this.srcurl = ''
            this.showIframe = false
        },
        getMonkey: function() {
            if (this.showIframe) {
                monkeyApi.getTestList({id: this.detailData.id}).then(res => {
                    const data = res.data.data[0]
                    this.detailData.process = data.process
                    if (data.process == 100) {
                        this.$message.success('测试已完成!')
                        this.showIframe = false
                    }
                })
            }
        },
        // 轮询查询测试状态
        getDataInterval: function() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = ""
            }
            this.timer = setInterval(() => {
                this.getMonkey()
            }, 3000)
        }
    },
    components: {
        TestOverview,
        TestDetailSub,
        ErrorLog
    },
    created () {
        this.getDataInterval()
    },
    destroyed() {
        console.log('TestDetail 页面销毁')
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = ""
        }
    }
}
</script>
<style scoped lang="scss">
.test-detail {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 15px;
    font-size: 14px;
    /* 头部 */
    .detail-header {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid #ccc;
        .header-item {
            height: 58px;
        }
        .header-item-one {
            display: flex;
            justify-content: start;
            .one-icon {
                width: 44px;
                height: 58px;
                img {
                    width: 100%;
                }
            }
            .one-content {
                padding-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding-right: 20px;
            }
        }
        .header-item-content {
            padding-right: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
    }
    /* 主体内容 */
    .detail-content {
        width: 100%;
        padding-top: 20px;
        .detail-content-panel {
            width: 100%;
            height: 430px;
            padding-bottom: 10px;
            overflow: auto;
        }
    }
}
</style>


